<!--
 * @Author: windys
 * @Description: 文章付费
 * @Date: 2022-02-23 15:04:12
-->
<template>
  <div class="PayArticle_page" v-if="flag">
    <div class="pay_container">
      <van-icon name="balance-o" size="50" />
      <span style="color: #ffa42d">
        {{ data.price ? data.price + "金石" : "免费" }}
      </span>
      <span style="color: #fa5353">
        <i class="iconfont icon-VIP"></i>
        {{ data.vipPrice ? data.vipPrice + "金石" : "免费" }}</span
      >

      <van-button type="warning" size="small" round @click="handleBy(false)"
        >点击购买观看更多</van-button
      >
    </div>
    <Agreement ref="Agreement" @handleAgree="handleBy"></Agreement>
  </div>
</template>


<script >
import { defineComponent, getCurrentInstance, onMounted, ref } from "vue";
import { buyArticle } from "@/api/article.js";
import { useRoute } from "vue-router";
export default defineComponent({
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    const instance = getCurrentInstance();
    const user = instance.appContext.config.globalProperties.$user;
    const flag = ref(true);

    onMounted(() => {
      setTimeout(() => {
        // 都免费
        if (props.data.vipPrice === 0 && props.data.price === 0) {
          flag.value = false;
        }
        // vip免费
        if (
          props.data.vipPrice === 0 &&
          props.data.price != 0 &&
          user.vipStatus > 0
        ) {
          flag.value = false;
        }
        // 都不免费
        if (
          props.data.vipPrice != 0 &&
          props.data.price != 0 &&
          props.data.isBuy === 1
        ) {
          flag.value = false;
        }
        console.log(flag.value, "flag");
      }, 500);
    });

    const route = useRoute();
    const Agreement = ref();
    const handleBy = async (flag) => {
      if (props.data.price >= 1 && !flag) {
        Agreement.value.show = true;
      } else {
        // 购买
        const res = await buyArticle({
          articleId: route.query.articleId,
          couponCodes: "",
        });
        if (typeof res !== "number") {
          Agreement.value.show = false
          emit("buySucc");
        }
      }
    };
    return {
      flag,
      Agreement,
      handleBy,
    };
  },
});
</script>


<style lang="scss" scoped>
.PayArticle_page {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 100%;
  left: 0;
  right: 0;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(255, 255, 255, 0)),
    color-stop(40%, #fffffff8),
    color-stop(100%, #ffffff)
  ); /* Chrome,Safari4+ */
  .pay_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #2e353d;
    display: flex;
    flex-direction: column;
    span {
      text-align: center;
      justify-content: center;
      font-size: 12px;
      display: flex;
      margin-bottom: 5px;
      i {
        font-size: 30px;
        color: #fa5353;
        position: relative;
        top: -7px;
        margin-right: 5px;
      }
    }
    button {
      padding: 5px 8px;
    }
  }
}
</style>